<template>
  <div class="h-full flex flex-col">
    <div class="mb-4">
      <div class="relative">
        <input 
          v-model="searchQuery" 
          @input="filterStocks"
          type="text" 
          placeholder="搜索股票代码或名称..." 
          class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>
    </div>
    
    <div class="flex-1 overflow-y-auto">
      <div class="space-y-2">
        <div 
          v-for="stock in filteredStocks" 
          :key="stock.symbol"
          @click="selectStock(stock.symbol)"
          class="p-3 bg-white rounded-lg shadow-sm hover:bg-blue-50 cursor-pointer transition-colors"
        >
          <div class="flex justify-between items-center">
            <div>
              <h3 class="font-semibold">{{ stock.name }}</h3>
              <p class="text-sm text-gray-600">{{ stock.symbol }}</p>
            </div>
            <div class="text-right">
              <p class="font-semibold">¥{{ stock.price.toFixed(2) }}</p>
              <p :class="stock.change >= 0 ? 'text-red-600' : 'text-green-600'">
                {{ stock.change >= 0 ? '+' : '' }}{{ stock.change.toFixed(2) }}%
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const emit = defineEmits(['select-stock']);
const searchQuery = ref('');
const stocks = ref([
  // A股
  { symbol: '600519', name: '贵州茅台', price: 1789.99, change: 2.35 },
  { symbol: '000858', name: '五粮液', price: 168.88, change: 1.23 },
  { symbol: '601318', name: '中国平安', price: 48.76, change: -0.54 },
  { symbol: '600036', name: '招商银行', price: 35.67, change: 0.87 },
  { symbol: '000333', name: '美的集团', price: 52.80, change: -1.25 },
  { symbol: '600276', name: '恒瑞医药', price: 32.56, change: 0.98 },
  { symbol: '601888', name: '中国中免', price: 189.75, change: 3.45 },
  { symbol: '600030', name: '中信证券', price: 22.38, change: -0.37 },
  { symbol: '601166', name: '兴业银行', price: 16.89, change: 0.62 },
  { symbol: '000651', name: '格力电器', price: 38.25, change: -0.89 },
  // 美股
  { symbol: 'AAPL', name: '苹果公司', price: 178.72, change: 1.23 },
  { symbol: 'MSFT', name: '微软公司', price: 337.94, change: 2.15 },
  { symbol: 'GOOGL', name: '谷歌', price: 131.86, change: -0.54 },
  { symbol: 'AMZN', name: '亚马逊', price: 178.15, change: 1.87 },
  { symbol: 'TSLA', name: '特斯拉', price: 237.49, change: -1.25 },
  { symbol: 'META', name: 'Meta平台', price: 327.82, change: 0.98 },
  { symbol: 'NVDA', name: '英伟达', price: 487.16, change: 3.45 },
  { symbol: 'BABA', name: '阿里巴巴', price: 73.42, change: -0.37 },
  { symbol: 'TCEHY', name: '腾讯控股', price: 43.18, change: 0.62 },
  { symbol: 'BIDU', name: '百度', price: 102.53, change: -0.89 }
]);
const filteredStocks = ref([]);

onMounted(() => {
  filteredStocks.value = [...stocks.value];
});

function filterStocks() {
  if (!searchQuery.value) {
    filteredStocks.value = [...stocks.value];
    return;
  }
  
  const query = searchQuery.value.toLowerCase();
  filteredStocks.value = stocks.value.filter(stock => 
    stock.symbol.toLowerCase().includes(query) || 
    stock.name.toLowerCase().includes(query)
  );
}

function selectStock(symbol) {
  emit('select-stock', symbol);
}
</script>

<style scoped>
/* 自定义滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>